<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
        margin:0;
        padding:0;
    }
    li{
        list-style: none;
    }
    /* 导航栏 */
    #nav{
        width: 100%;
        height:50px;
        background-color:#2dbb55;
    }
    /* 广告栏 */
    #banner{
        width:100%;
        height:180px;
        background-color:yellow;
    }
    #nav >ul{
        width:80%;
        height:50px;
        /* background-color: aqua; */
        display: flex;
        /* list-style: none; */
        align-items:center;
        justify-content: space-around;
        margin:0 auto;
    }
    #nav >ul >li{
        /* inherit表示继承父级 */
        height: inherit;
        padding:0 10px;
        font-size:18px;
        color:#fff;
        position:relative;
      
        /* line-height:50px; */
    }
    #nav >ul >li >ol{
        width:200px;
        position: absolute;
        top:50px;
        left:0;
        display: none;
        background-color: aqua;
        /* list-style: none; */
    }
    #nav >ul >li:hover> ol{
        display: block;
    }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <li>文字1</li>
            <li>文字2</li>
            <li>文字3
                <ol>
                    <li>3ol</li>
                    <li>3ol</li>
                    <li>3ol</li>
                </ol>
            </li>
            <li>文字4</li>
            <li>文字5</li>
            <li>文字6</li>
            <li>文字7</li>
            <li>文字8</li>
        </ul>

    </div>
    <!-- 广告栏 -->
    <div id="banner">
        广告栏
    </div>
</body>
</html>